<template>
    <div class="history">
        <el-dialog
            title="查看单元格历史记录 - 任务名称"
            :visible.sync="PdialogVisible"
            :before-close="handleClose"
            >
            <span><i class="el-icon-question question"></i></span>
            <div class="middleBody">
                <div class="culum">
                    <table border="0">
                        <thead>
                        <tr>
                            <th>最后更新时间</th>
                            <th>人员</th>
                            <th>名称</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in tableData" :key="index">
                            <td>{{item.date}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.city}}</td>
                            <td v-if="item.edit">编辑</td>
                            <td v-if="item.create" class="create">创建</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="close()" class="close">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name:'insert',
        data() {
            return {
                PdialogVisible: this.visible,
                tableData: [{
                    date: '2019-11-26 19:20',
                    name: '王小虎',
                    province: '上海',
                    city: '最近的顶顶顶顶钉钉顶顶顶顶钉钉顶顶顶顶顶顶顶顶钉钉顶顶顶顶钉钉顶顶顶顶顶顶顶顶钉钉顶顶顶顶钉钉顶顶顶顶',
                    address: '上海市普陀区金沙江路 1518 弄',
                    edit:true,
                    create:false
                }, {
                    date: '2019-11-26 19:20',
                    name: '王小虎',
                    province: '上海',
                    city: '最近的顶顶顶顶钉钉顶顶顶顶钉钉顶顶顶顶顶顶顶顶钉钉顶顶顶顶钉钉顶顶顶顶顶顶顶顶钉钉顶顶顶顶钉钉顶顶顶顶',
                    address: '上海市普陀区金沙江路 1518 弄',
                    edit:true,
                    create:false
                }, {
                    date: '2019-11-26 19:20',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    edit:true,
                    create:false
                }, {
                    date: '2019-11-26 19:20',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    edit:true,
                    create:false
                }, {
                    date: '2019-11-26 19:20',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    edit:true,
                    create:false
                }, {
                    date: '2019-11-26 19:20',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    edit:true,
                    create:false
                }, {
                    date: '2019-11-26 19:20',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    edit:false,
                    create:true
                }]
            };
        },
        props:{
            visible:Boolean
        },
        watch:{
            visible:{
                handler:function(val,oldval){
                    if(val!=oldval){
                        this.$nextTick(()=>{
                            this.PdialogVisible=val
                        })
                    }
                },
                immediate:true,//关键
                deep:true
            },
        },
        mounted() {
            console.log(this.PdialogVisible)
        },
        methods: {
            handleClose(){
                this.close()
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleClick(index, row) {
                console.log(index, row);
            },

            close(){
                this.PdialogVisible=false;
                this.$parent.closeHistory();
            },
            confirm(){
                this.PdialogVisible=false;
                this.$parent.closeHistory();
            }
        }
    };
</script>
<style lang="less" scoped>
    @import url('./css/history');
</style>
<style lang="less">
    .history{
        width: 100%;
        height: 100%;
        .el-dialog{
            width:500px;
            height:363px;
            background:rgba(255,255,255,1);
            border-radius:2px;
            .el-dialog__header{
                padding: 14px 14px 7px;
                .el-dialog__title{
                    line-height: 17px;
                    font-size: 16px;
                }
                .el-dialog__headerbtn{
                    right: 14px;
                    top: 13px;
                }
            }
            .el-dialog__body{
                padding: 20px 14px;
                padding-top: 0;
                .question{
                    position: absolute;
                    top: 16px;
                    right: 54px;
                }
            }
            .el-dialog__footer{
                padding-right: 20px;
                padding: 7px 14px 14px;
                button{
                    width:74px;
                    height:28px;
                    border-radius:6px;
                    font-size:12px;
                    line-height: 12px;
                    font-family:PingFangSC-Regular,PingFang SC;
                    font-weight:400;
                    letter-spacing:1px;
                    padding: 8px 14px;

                }
                .confirm{
                    background: #6D7A94;
                    color:rgba(255,255,255,1);
                    margin-left: 24px;
                }
                .close{
                    background: white;
                    color:rgba(50,54,58,1);
                }
            }

        }
    }

</style>
